<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="cdnload" content="vue,mockjs" />
    <title>062-2</title>
    <link rel="stylesheet" href="./062-style.css" />
  </head>

  <body>
    <div id="app">
      <div class="banner_max">
        <div>
          动画滚动
          <input type="radio" v-model="isAnimation" :value="1" />是
          <input type="radio" v-model="isAnimation" :value="0" />否
          <br />
          <a href="./062-index.html" target="_blank">更加完善的导航条联动方式</a>
        </div>
      </div>
      <div id="nav_box" class="nav_box sticky">
        <span
          v-for="(item,index) in navList"
          :key="index"
          :class="[ 'nav_item', { 'nav_item_active':activeIndex == index } ]"
          @click="selectItem(index)"
          >{{ item.title }}</span
        >
      </div>

      <div v-for="(item, index) in navList" :key="index" class="box">
        <h2 :id="`title-${index}`">{{ item.title }}</h2>
        <div class="content_max">
          <div v-for="(e, i) in item.content" :key="i" class="content">{{ e }}</div>
        </div>
      </div>
    </div>
    <script>
      // 模拟数据
      const res = Mock.mock({
        'list|5': [
          {
            id: '@id()', // id
            title: '@cname()', // 名称
            'content|1-20': ['@cparagraph(1, 5)'] // 内容
          }
        ]
      })
      new Vue({
        el: '#app',
        data() {
          return {
            isAnimation: 1,
            activeIndex: 0,
            navList: res.list
          }
        },
        methods: {
          selectItem(index) {
            this.activeIndex = index
            const id = `title-${index}`
            if (this.isAnimation == 1) {
              const dom = document.getElementById(id)
              dom.scrollIntoView({ behavior: 'smooth' })
            } else {
              location.href = '#' + id
            }
          }
        }
      })
    </script>
  </body>
</html>
